<template>
  <div class="screen">
    <!-- 头部区域 -->
    <div class="head">
      <p class="title">农业数据实时监控系统</p>
      <img src="../../public/static/img/top02.png" class="logo" />
      <img class="switchThem" src="../../public/static/img/dark.png" />
    </div>
    <!-- 图标区域 -->
    <div class="container">
      <div class="left">
        <!-- 横向柱状图 -->
        <div :class="screenStatus.crosswise ? 'fullscreen' : 'crosswise'"
        @click="changeScreen('crosswise')">
                 <crosswise-comp ref="crosswise"></crosswise-comp>
          <div class="resize">
            <span :class="['iconfont',screenStatus.crosswise ? 'icon-compress-alt':'icon-expand-alt']"></span>
          </div>
        </div>
        <!-- 纵向柱状图 -->
        <div :class="screenStatus.vertical ? 'fullscreen' : 'vertical'" 
          @click="changeScreen('vertical')">
            <vertical-comp ref='vertical'></vertical-comp>
          <div class="resize" 
         >
           <span :class="['iconfont',screenStatus.vertical ? 'icon-compress-alt':'icon-expand-alt']"></span>
          </div>
        </div>
      </div>
      <div class="center">
        <!-- 环状图 -->
        <div  :class="screenStatus.annular ? 'fullscreen' : 'annular'"    @click="changeScreen('annular')" >
              <huan-copm ref='huan'></huan-copm>
          <div class="resize">
            <span :class="['iconfont',screenStatus.crosswise ? 'icon-compress-alt':'icon-expand-alt']"></span>
          </div>
        </div>
        <!-- 地图 -->
        <div  :class="screenStatus.map ? 'fullscreen' : 'map'"    @click="changeScreen('map')">
            <map-copm ref='map'></map-copm>
          <div class="resize">
            <span :class="['iconfont',screenStatus.crosswise ? 'icon-compress-alt':'icon-expand-alt']"></span>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 折线图 -->
        <div  :class="screenStatus.broken ? 'fullscreen' : 'broken'"    @click="changeScreen('broken')">
       <broken-comp ref='broken'></broken-comp>
          <div class="resize">
            <span :class="['iconfont',screenStatus.crosswise ? 'icon-compress-alt':'icon-expand-alt']"></span>
          </div>
        </div>
        <!-- 饼图 -->
        <div :class="screenStatus.pie ? 'fullscreen' : 'pie'"    @click="changeScreen('pie')">
         <pic-comp ref='pic'></pic-comp>
          <div class="resize">
            <span :class="['iconfont',screenStatus.crosswise ? 'icon-compress-alt':'icon-expand-alt']"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import verticalComp from '@/components/verticalComp.vue'
import picComp from '@/components/piccopm.vue'
import mapCopm from "../components/mapCopm.vue"
import huanCopm from '@/components/huanComp.vue'
import crosswiseComp from '@/components/crosswiseComp.vue'
import brokenComp from '@/components/brokenComp.vue'
export default {

  components: {
verticalComp,
picComp,
mapCopm,
huanCopm,
crosswiseComp,
brokenComp
  },
  data() {
    return {
          screenStatus:{
                crosswise:false,
                vertical:false,
                annular:false,
                map:false,
                broken:false,
                pie:false
            }
    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
 // 1.大屏切换
        changeScreen(type){
            // 切换样式全屏状态(dom重新渲染)
            this.screenStatus[type] = !this.screenStatus[type]
            // 等到本次dom更新完毕后调用图表组件内部适配方法
            this.$nextTick(()=>{
                this.$refs[type].adapTive()  
            }) 
        },
  },
};
</script>

<style>

/*全屏样式的定义 */
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

/* 大屏容器 */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url("../../public/static/img/bgc01.png");
}

/* 标题区域 */
.head {
  flex: 1;
  border: 2px solid blue;
  margin-bottom: 0.1%;
  position: relative;
}
.head .title {
  text-align: center;
  color: #d96720;
  font-weight: bold;
  font-size: 25px;
  margin: 10px 0 0 0;
}
.head .logo {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}
.head .switchThem {
  position: absolute;
  right: 4%;
  bottom: 70%;
  color: orange;
  font-size: 14px;
  width: 18px;
}

/* 图标区域 */
.container {
  flex: 8;
  display: flex;
  justify-content: space-around;
}

/* 左侧视图区域 */
.container .left {
  /* flex: 3; */
  border: 1px solid red;
  width: 28%;
  height: 100%;
  margin-left: 0.5%;
  display: flex;
  flex-direction: column;
}
.left .crosswise {
  flex: 3;
  border: 1px solid purple;
  margin-bottom: 8%;
}
.left .vertical {
  flex: 2.5;
  border: 1px solid brown;
}

/* 中间视图区域 */
.container .center {
  /* flex: 5; */
  border: 1px solid green;
  width: 40%;
  height: 100%;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
}
.center .annular {
  flex: 1;
  border: 1px solid palegreen;
  margin-bottom: 3%;
}
.center .map {
  flex: 4;
  width: 100%;
  border:  1px solid red;
}

/* 右侧视图区域 */
.container .right {
  /* flex: 3; */
  border: 1px solid orange;
  width: 28%;
  height: 100%;
  margin-right: 0.5%;
  display: flex;
  flex-direction: column;
}
.right .broken {
  flex: 1;
  border: 1px solid palevioletred;
  margin-bottom: 6%;
}
.right .pie {
  flex: 1;
  border: 1px solid olive;
}

.crosswise,
.vertical,
.annular,
.map,
.broken,
.pie {
  position: relative;
}

/* 缩放标记样式 */
.resize {
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  color: white;
}

</style>
